<template>
    <div class="e-line-container">
        <div
            ref="chartContainer"
            :style="{ width: '100%', height: height + 'px' }"
        ></div>
    </div>
</template>

<script>
module.exports = {
    name: 'EchartsLine2',
    props: {
        height: {
            type: Number,
            default: 330,
        },
        // 图表数据
        chartData: {
            type: Object,
            default: () => ({
                xAxis: [],
                barData1: [],
                barData2: [],
                lineData: [],
            }),
        },
    },
    data() {
        return {
            chart: null,
        }
    },
    watch: {
        chartData: {
            handler(newVal) {
                this.updateChart()
            },
            deep: true,
        },
    },
    mounted() {
        this.initChart()
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose()
        }
        window.removeEventListener('resize', this.handleResize)
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chartContainer)
            this.updateChart()
        },
        updateChart() {
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                    formatter: (params) => {
                        const [bar1, bar2, line] = params
                        return `
                        <style>
                            .tooltip-container .tooltip-item{
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                            }
                            .tooltip-container .tooltip-item .tooltip-circle{
                                width: 6px;
                                height: 6px;
                                border-radius: 50%;
                                margin-right: 10px;
                            }
                            .tooltip-container .tooltip-item .tooltip-label {
                                margin-right:20px;
                            }
                            .tooltip-container .tooltip-item .tooltip-value {
                                width: 70px;
                                text-align: right;
                            }
                        </style>
                            <div class="tooltip-container">
                                <div class="tooltip-title" style="color: #333;font-weight: bold;">${bar1.name}</div>
                                <div class="tooltip-item">
                                    <span class="tooltip-circle" style="background: #0FCFDB"></span>
                                    <span class="tooltip-label">计划完成</span>
                                    <span class="tooltip-value" style="color: #0FCFDB">${bar1.value}</span>
                                </div>
                                <div class="tooltip-item">
                                    <span class="tooltip-circle" style="background:#2EB4FF"></span>
                                    <span class="tooltip-label">实际完成</span>
                                    <span class="tooltip-value" style="color: #2EB4FF">${bar2.value}</span>
                                </div>
                                <div class="tooltip-item">
                                    <span class="tooltip-circle" style="background: #FD9D17"></span>
                                    <span class="tooltip-label">完成比例</span>
                                    <span class="tooltip-value" style="color: #FD9D17">${line.value}%</span>
                                </div>
                            </div>
                        `
                    },
                },
                grid: {
                    left: '10',
                    right: '10',
                    bottom: '10',
                    top: '10%',
                    containLabel: true,
                },
                legend: {
                    top: 4,
                    icon: 'rect',
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 50,
                    textStyle: {
                        lineHeight: 1,
                        padding: [3, 0, 0, 0],
                        fontSize: 12,
                        color: '#666',
                        rich: {
                            a: {
                                verticalAlign: 'top',
                            }
                        }
                    },
                },
                xAxis: {
                    type: 'category',
                    data: this.chartData.xAxis,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#333333',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#D9D9D9',
                                type: 'dashed',
                            },
                        },
                    },
                    {
                        type: 'value',
                        max: 100,
                        min: 0,
                        position: 'right',
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#D9D9D9',
                                type: 'dashed',
                            },
                        },
                        axisLabel: {
                            formatter: '{value}%',
                        },
                    },
                ],
                series: [
                    {
                        name: '计划完成',
                        type: 'bar',
                        data: this.chartData.barData1,
                        barWidth: 10,
                        itemStyle: {
                            color: '#0FCFDB',
                            borderRadius: 5,
                        },
                    },
                    {
                        name: '实际完成',
                        type: 'bar',
                        data: this.chartData.barData2,
                        barWidth: 10,
                        itemStyle: {
                            color: '#1A9FFF',
                            borderRadius: 5,
                        },
                    },
                    {
                        name: '完成比例',
                        type: 'line',
                        data: this.chartData.lineData,
                        yAxisIndex: 1,
                        itemStyle: {
                            color: '#FD9D17',
                        },
                    },
                ],
            }
            this.chart.setOption(option)
        },
        handleResize() {
            if (this.chart) {
                this.chart.resize()
            }
        },
    },
}
</script>
